<template>
  <base-modal
    :show.sync="visible"
    width="420px"
    class="edit-dialog"
    @closed="onClose"
  >
    <div slot="title">
      <span class="el-dialog__title">{{ id ? $t('event.setting.additional.component.editCardnameDialog.title1') : $t('event.setting.additional.component.editCardnameDialog.title2') }}</span>
    </div>
    <div class="base-modal-content">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        
        label-position="top"
      >
        <el-form-item :label="`${$t('common.base.name')}：`" prop="name">
          <el-input
            v-model="form.name"
            :placeholder="$t('event.setting.additional.component.editCardnameDialog.pla1')"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item :label="`${$t('common.base.explain')}：`" prop="description">
          <el-input
            type="textarea"
            v-model="form.description"
            :placeholder="$t('event.setting.additional.component.editCardnameDialog.pla2')"
            maxlength="500"
          ></el-input>
        </el-form-item>
        <el-form-item prop="resource">
          <div slot="label">
            {{$t('common.base.type')}}
            <el-tooltip
              effect="dark"
              :content="$t('event.setting.additional.component.editCardnameDialog.tips1')"
              placement="top"
            >
              <span><i class="el-icon-question"></i>：</span>
            </el-tooltip>
          </div>
          <el-radio-group v-model="form.inputType" :disabled="form.id ? true : false">
            <el-radio label="single">{{$t('common.base.onceTime')}}</el-radio>
            <el-radio label="multiple">{{$t('common.base.moreTime')}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :disabled="pending" @click="onClose">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" :disabled="pending" @click="onSubmit" v-if="id">{{$t('common.base.confirm')}}</el-button>
      <el-button type="primary" :disabled="pending" @click="onSubmit" v-else>{{$t('common.base.nextSetp')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
/* api */
import * as SettingServiceEventApi from '@src/api/SettingServiceEventApi';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import i18n from '@src/locales'
export default {
  name: 'edit-cardname-dialog',
  data() {
    return {
      visible: false,
      pending: false,
      id: '',
      form: {
        id: '', //  id, 编辑组件时会使用到
        name: '', //  名字
        description: '', //  描述
        inputType: 'single', //  单/多次
      },
      rules: {
        name: [{ required: true, message: i18n.t('event.setting.additional.component.editCardnameDialog.pla3'), trigger: 'blur' }],
      },
    };
  },
  methods: {
    openDialog(card) {
      if (card) {
        for (let key in this.form) {
          if (key == 'description') {
            this.form[key] = this.htmlUnEscape(card[key]);
          } else {
            this.form[key] = card[key] || '';
          }
        }
        
        this.id = card.id;
      } else {
        let { form } = this.$options.data();
        this.form = form;
      }

      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.pending = false;
      this.id = '';
      this.$refs.form.resetFields();
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.id) return this.onUpdate();
          this.onCreate();
        } else {
          console.error('error submit!!');
          return false;
        }
      });
    },
    /* 创建附加组件 */
    onCreate() {
      const params = {
        description: this.htmlEscape(this.form.description),
        inputType: this.form.inputType,
        name: this.form.name,
      };

      this.pending = true;

      SettingServiceEventApi.addCard(params)
        .then(res => {
          const { status, message, data } = res;
          if (status == 0) {
            this.$message.success(this.$t('common.base.tip.createSuccess'));
            this.$emit('editCardSubmit');
            this.onClose();

            setTimeout(() => {
              // this.$platform.openTab({
              //   id: 'event_card_setting',
              //   title: '附加组件表单设置',
              //   url: `/setting/serviceStation/card/view?cardId=${data}`,
              //   reload: true,
              // });
              openAccurateTab({
                type: PageRoutesTypeEnum.PageEventCardSetting,
                params: `cardId=${data}`,
                reload: true,
              })
            }, 1000);
          } else {
            this.$message.error(message);
          }
        })
        .finally(() => {
          this.pending = false;
        })
        .catch(err => console.error(err))
    },
    /* 修改附加组件 */
    onUpdate() {
      const params = {
        description: this.htmlEscape(this.form.description),
        id: this.form.id,
        name: this.form.name,
      };

      this.pending = true;

      SettingServiceEventApi.updateCardInfo(params)
        .then(res => {
          const { status, message } = res;
          if (status == 0) {
            this.$message.success(this.$t('common.base.tip.editSuccess'));
            this.$emit('editCardSubmit');

            this.onClose();
          } else {
            this.$message.error(message);
          }
        })
        .finally(() => {
          this.pending = false;
        })
        .catch(err => console.error(err))
    },
    // 防止XSS的恶意脚本攻击
    htmlEscape(value) {
      return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    },
    htmlUnEscape(value) {
      if (!value) return '';
      return value.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
    },
  },
};
</script>
<style lang="scss">
.edit-dialog {
  .base-modal-header {
    display: flex;
    justify-content: space-between;
    .el-dialog__title {
      font-size: 18px;
    }
    .el-tooltip {
      color: #999;
    }
  }
  .base-modal-body {
    padding: 20px;
    .el-form {
      .el-form-item {
        .el-form-item__content {
          width: 280px;
          .el-radio {
            margin-right: 24px;
          }
        }
        .el-tooltip {
          color: #999;
        }
      }
    }
  }
}
</style>
